<template>
	<view>
		<view class="my-settle-container">
			<label class="radio" @click="changeAllGoodsState">
				<radio :checked="isFulCheck" color="#c00000" /><text>全选</text>
			</label>
			<view class="amount-box">
				合计：<text class="amount">￥{{checkedGoodsAmount}}</text>
			</view>
			<view class="btn-settle">结算（{{checkedCount}}）</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		name:"my-settle",
		computed:{
			...mapGetters('cart_m',['checkedCount','total','checkedGoodsAmount']),
			isFulCheck(){
				return this.total == this.checkedCount
			}
		},
		onLoad() {
			console.log(this.$store);
		},
		data() {
			return {
				
			};
		},
		methods:{
			...mapMutations('cart_m',['updateAllGoodsState']),
			changeAllGoodsState(){
				// 触发mutations中的方法
				this.updateAllGoodsState(!this.isFulCheck)
			}
		}
	}
	/* 
	 全选   购物车当中的所有的状态都是选中的状态 全选是勾选 不是全部选中 全选不选中
	 
	 cart_m state cart[{},{}]  每个商品的goods_state   如果有一个不是true 
	 getters
	 
	 全选反选按钮 思路
	 思路1.判断cart_m  state cart 是否所有的cart 【{}】 对象中的goods_state true
	 cart_m  getters 
	 
	 思路2. total购物车的总数  checkedCount结算的数量选中的商品数量
	 total == checkedCount  全选
	 total ！= checkedCount 不选中
	 
	 radio自己控制 全选 /反选  isFullCheck
	 全选  购物车商品全部选中
	 点击全选按钮 购物车中的goods_state 都变为true
	 反选 全部变为false
	 
	 cart_m state cart [{},{}] goods_state 最新值  ！isFullCheck
	 
	 
	 
	 合计
	 1.挑选选中的商品
	 2.合计 = 单价 * 商品的数量 + 。。。
	 
	 cart_m state cart[{},{}]   过滤选中的商品  累加 单价 * 数量 goods_price goods_count
	 getters中
	 
	 state --- computed
	 
	 
	 
	 
	 */
</script>

<style lang="scss">
.my-settle-container{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: #f4f4f4;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 20px;
	z-index: 100;
}
</style>